const CompressionWebpackPlugin = require('compression-webpack-plugin')
const path = require('path')

const config = {
  productionGzip: true,
  productionGzipExtensions: ['js', 'css']
}

const isProduction = process.env.NODE_ENV === 'production'

const vueConfig = {
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  configureWebpack: {
    output: {
      library: 'VmaVueAntd'
    },
    assetsPublicPath: './'
  },
  css: {
    extract: true,
    loaderOptions: {
      // 给 sass-loader 传递选项
      sass: {
        data: `@import "@/packages/theme/variable.scss";`
      },
    }
  },
  chainWebpack: config => {
    config.module
      .rule('images')
      .use('url-loader')
      .loader('url-loader')
      .tap(options => Object.assign(options, {
        limit: 100000
      }))
  }
}

if (isProduction && config.productionGzip) {
  Object.assign(vueConfig, {
    configureWebpack: {
      externals: /^(vue|axios|ant-design-vue|vma-)/i,
      plugins: [
        // gzip
        new CompressionWebpackPlugin({
          asset: '[path].gz[query]',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + config.productionGzipExtensions.join('|') + ')$'),
          threshold: 10240,
          minRatio: 0.8
        })
      ]
    }
  })
}

// vue.config.js
module.exports = vueConfig